import React, { FC } from "react"
import { Box, Typography, Container, ListItemIcon, Card } from "@mui/material"
import { APP_BAR_MOBILE } from "../../layouts/DefaultLayout"
import { styled } from "@mui/material/styles"
import TSideSection from "../../components/TSideSection"

const Banner = styled(Box)(({ theme }) => ({
  backgroundImage: "url(/static/about_bg.JPG)",
  backgroundSize: "cover",
  width: "100%",
  backgroundPosition: "center center",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
  color: "#fff",
  flexDirection: "column",
  position: "relative",
  [theme.breakpoints.up("xs")]: {
    height: "300px",
  },
  [theme.breakpoints.up("sm")]: {
    height: "400px",
  },
  [theme.breakpoints.up("md")]: {
    height: "500px",
  },
  [theme.breakpoints.up("lg")]: {
    height: "600px",
  },
  [theme.breakpoints.up("xl")]: {
    height: "800px",
  },
  "&:after": {
    position: "absolute",
    height: "100%",
    width: "100%",
    content: "''",
    backgroundColor: "rgba(0 0 0 / 30%)",
  },
}))

const BannerContent = styled(Box)({
  position: "relative",
  zIndex: "1",
  paddingTop: APP_BAR_MOBILE + "px",
})

const Introduction: FC = () => {
  return (
    <>
      <Banner>
        <BannerContent>
          <Typography variant="h1" align="center">
            About
          </Typography>
          <Typography variant="body1" align="center">
            All things in their being are good for something
          </Typography>
        </BannerContent>
      </Banner>

      <Container maxWidth="lg" sx={{ paddingTop: "15px" }}>
        <Box sx={{ display: "flex", alignItems: "start" }}>
          <Box>
            <Typography variant="h4">关于博主</Typography>
            <Typography variant="body1" sx={{ paddingBottom: "10px" }}>
              Felix，目前就职于感知阶跃(深圳)有限公司前端工程师岗位, 主要负责通过AI算法为品牌方生成模特效果图相关业务功能的开发, 主要技术栈涉及typescript, vite, vue3.0, reactjs, umijs,
              qiankun微前端框架, pinia, redux-toolkit, redux-persist, bootstrap, material-ui, naive-ui...等多种前端主流技术;
              <br />
              博主从2019年开始从事前端开关的工作, 先开发过汽车服务平台, 教育平台(直播, 咨询, 商城), 同城服务平台(地图, 实时聊天, 订单系统)等;
              <br />
              博主认为, 我们不应该自我设限, 我从来不把自己定义为一个"前端", 我更喜欢称自己为"developer", 作为一个开发者, 我曾尝试过了解IT行业的各个领域, 包括使用objective-c/swift构建ios应用,
              使用Flutter构建跨平台应用, 使用golang搭建分布式服务, 了解过docker的使用, 搭建前端ci/cd流程, 使用taro/uniapp构建跨平台小程序应用;
              <br />
              在经过这些尝试以后, 我发现自己依然对前端开发领域保持着浓厚的兴趣, 所以, 在以后的职业规划中, 我将继续在在前端领域探索、深耕, 包括对nodejs, 前端脚手架的开发, 组件库的开发等...
            </Typography>
            <Typography variant="h4">关于博客</Typography>
            <Typography variant="body1" sx={{ paddingBottom: "10px" }}>
              TheOne博客系统主要目的是为了博主用来记录、总结、分享一些知识而搭建的平台, 如果大家对我的文章提及的内容有疑问, 可以在文章的评论区进行留言, 如果有不懂的前端技术, 也可以在留言区进行留言,
              我会抽时间全力来帮助你解答; 此外, 一方面是为了将平时学到的技术用文字记录下来, 另一方面, 我也会尝试在TheOne中使用这些技术, 从而达到一个总结的作用; 最后, 因为在平时的工作中,
              使用到的后端、数据库、运维相关的技术甚少, 很多会的东西长时间不用, 最后都丢了, 所以也会在这个项目中达到一个巩固的效果;
              <br />
            </Typography>
            <Typography variant="h4">联系博主</Typography>
            <Typography variant="body1" sx={{ paddingBottom: "10px" }}>
              • 邮箱:{" "}
              <Box component="span" sx={{ textDecoration: "underline" }}>
                FelixChan3025@gmail.com
              </Box>
              <br />• 微信: Hi_FelixC
            </Typography>
          </Box>
          <Box
            sx={{
              marginLeft: "20px",
              display: {
                xs: "none",
                lg: "block",
              },
            }}
          >
            <TSideSection title="Naice" subTitle="I just wanna put sth here" icon="ant-design:android-filled" sx={{ width: "260px", marginBottom: "20px" }} />
            <TSideSection title="Kool" color="warning" subTitle="Is this looks good?" icon="ant-design:apple-filled" sx={{ width: "260px", marginBottom: "20px" }} />
          </Box>
        </Box>
      </Container>
    </>
  )
}

export default Introduction
